<template>
	<view class="main">
		<view>
			<scroll-view class="list" scroll-y="true">
				<view class="university" v-for="(item, index) in listData" :key="index+id">
					<view class="universityNav">
						<view class="universityInfo">
							<span>
								<uni-icons v-if="item.type === 'SUCCESS'" type="checkbox-filled" size="20"
									color="#02b068"></uni-icons>
								<uni-icons v-else-if="item.type === 'WARNING'" type="info-filled" size="20"
									color="#f78f5f"></uni-icons>
								<uni-icons v-else-if="item.type === 'ERROR'" type="minus-filled" size="20"
									color="#f25643"></uni-icons>
								<uni-icons v-else type="help-filled" size="20" color="#8c8c8c"></uni-icons>
							</span>
							<span style="padding-left: 10px;">{{item.title}}</span>
							<span style="float: right;">{{item.createTime.substring(5, 16)}}</span>
						</view>
						<view class="universityInfo">{{item.content}}</view>
						<view class="line"></view>
					</view>
					<view class="button-sp-area">
						<button @click="detailsFormData(item)" class="mini-btn" type="default" size="mini">详情</button>
						<button @click="toNotify(item, index)" class="mini-btn" type="primary" size="mini">已读</button>
					</view>
				</view>
			</scroll-view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import {
		getUserNotify,
		readNotify
	} from "@/api/notify.js";
	export default {
		data() {
			return {
				timer: null,
				params: {
					pageSize: 10,
					pageNo: 1,
				},
				listData: [],

				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			};
		},
		// watch: {
		// 	params: {
		// 		deep: true,
		// 		handler() {
		// 			this.getList()
		// 		},
		// 	},
		// },
		computed: {

		},
		created() {
			this.getList()
			// this.timerGetNotify(5) //定时刷新
		},
		//下拉刷新
		onPullDownRefresh() {
			this.params.pageNo = 1;
			uni.stopPullDownRefresh();
			this.listData = [];
			this.getList()
		},
		//上拉加载
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			this.params.pageNo++;
			this.getList();
		},
		onNavigationBarButtonTap(e) {
			if (e.text == '全部已读') {
				this.readNotify()
			}
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中...'
				});
				getUserNotify(this.params).then((res) => {
					uni.hideLoading(); //隐藏加载框
					if (this.params.pageNo === 1) {
						this.listData = res.data.records;
					} else {
						// this.listData = this.listData.concat(res.data.records);
						// js 数组对象合并，并根据id去重

						// 存储已加载数据的id
						const loadedIds = new Set(this.listData.map(item => item.id));

						// 过滤掉已加载的数据，并更新已加载数据的id
						let newData = res.data.records.filter(item => {
							if (!loadedIds.has(item.id)) {
								loadedIds.add(item.id);
								return true;
							}
							return false;
						});

						// 将新数据追加到现有数据
						this.listData = this.listData.concat(newData);
						console.log(this.listData.length)
					}

					// 判断是否还有更多数据
					if (res.data.records.length < this.params.pageSize) {
						this.status = 'noMore'; // 没有更多数据
					} else {
						this.status = 'more'; // 还有更多数据
					}
				}).catch((err) => {
					if (this.timer) {
						clearInterval(this.timer)
					}
				})
			},
			timerGetNotify(cycle) {
				if (this.timer) {
					clearInterval(this.timer)
				}
				this.timer = setInterval(() => this.getList(), cycle * 1000)
			},
			toNotify(item, index) {
				if (item.instanceId) {
					this.readNotify(item.id)
				}
			},
			readNotify(id) {
				let list = id ? [id] : this.listData.map((n) => n.id)
				readNotify(list).then((rsp) => {
						uni.showLoading({
							title: '已读成功'
						});
						this.params.pageNo = 1;
						this.listData = []
						this.getList()
					})
					.catch((err) => {
						uni.showLoading({
							title: '已读失败'
						});
					})
			},

			// 详情
			detailsFormData(item) {
				if (item.instanceId) {
					this.readNotify(item.id)
				}
				uni.navigateTo({
					url: `/pages/instance/instancePreview?instanceId=${item.instanceId}&nodeId=${null}`
				})
			}

		}
	};
</script>

<style scoped>
	.main {
		padding: 10px 0;
	}

	.university {
		background-color: #fff;
		padding: 10px;
		margin-bottom: 10px;
	}

	.universityInfo {
		font-size: 0.84rem;
		color: #606266;
		line-height: 1.4rem;
	}

	.button-sp-area {
		text-align: right;
	}

	.button-sp-area button {
		margin: 0 5px;
	}

	.line {
		border-bottom: 1px solid #e9e9e9;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
</style>